<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<!--<head th:include="layout :: htmlhead" th:with="title='后台管理'">-->
<head th:fragment="htmlhead">
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="renderer" content="webkit" />
    <title>后台管理系统</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css"></link>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
</head>

<style>
    body{
        background-repeat: no-repeat;
        background-size:100% 100%;
        background-attachment: fixed;
    }
</style>
<!--<body background="images\bg.jpg" >-->
<div class="layui-container" style="height: 100%">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 6%">
        <legend style="margin-left: 40%"><span style="font-weight: bold;font-size:22px;">跨境电商平台系统</span></legend>
    </fieldset>

    <div class="layui-row" style="margin-left: 120px">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                &nbsp;
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="grid-demo">
                <form id="useLogin" class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input id="username" name="username" lay-verify="required" autocomplete="off" class="layui-input" type="tel"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密&nbsp;&nbsp;码</label>
                        <div class="layui-input-inline">
                            <input id="password" name="password" lay-verify="required" autocomplete="off" class="layui-input" type="password"/>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-left: 50px">
                        <input type="radio" name="role" value="mvo" title="品牌商">
                        <input type="radio" name="role" value="bvo" title="借卖方" checked>
                        <input type="radio" name="role" value="adm" title="系统管理员" >
                    </div>
<!--                    <div class="layui-form-item" style="margin-top: -20px;">-->
<!--                        <label class="layui-form-label"></label>-->
<!--                        <div class="layui-inline">-->
<!--                            <input type="checkbox" name="rememberMe" lay-skin="primary"  title="记住我"/>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item"  style="margin-left: -30px">
                        <div class="layui-input-block">
                            <button class="layui-btn" type="reset">重置</button>
                            <button id="loginBtn" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="login">登录</button>
                            <a href="/register" class="layui-btn">注册</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="text" value=""  placeholder="请输入验证码（不区分大小写）" class="input-val">
                            <canvas id="canvas" width="100" height="30"></canvas>
                            <!-- <button class="btn">提交</button> -->
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script >
    $(function () {
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click',function(){
            draw(show_num);
        })
    })
    //生成并渲染出验证码图形
    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
        for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var deg = Math.random() - 0.5; //产生一个随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(deg);
            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }
    //得到随机的颜色值
    function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    $(function(){
        layui.use(['form' ,'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            form.on("submit(login)",function () {
                var val = $(".input-val").val().toLowerCase();
                if(val==''){
                    layer.alert("请输入验证码!")
                    return false
                }
                login();
                return false;
            });
            var path=window.location.href;
            if(path.indexOf("kickout")>0){
                layer.alert("您的账号已在别处登录；若不是您本人操作，请立即修改密码！",function(){
                    window.location.href="/login";
                });
            }
        })
    })
    function login() {
        // var username=$("#username").val();
        // var password=$("#password").val();
        // var role = $("#role").val();
        $.post("/lay/login", $("#useLogin").serialize(), function (data) {
            if (data.code == 1) {
                window.location.href = data.url;
            } else {
                layer.alert(data.message, function () {
                    layer.closeAll();//关闭所有弹框
                });
            }
        });
    }
</script>
</body>
</html>
      